<template>
  <div class="digital-chart">
    <div class="chart-title">{{ title }}</div>
    <div class="digital-container">
      <div class="digital-display">
        <div class="digital-number" v-for="(digit, index) in displayNumber" :key="index">
          <div class="digit-flip" :class="{ 'flip': digit.isFlipping }">
            <div class="digit-front">{{ digit.current }}</div>
            <div class="digit-back">{{ digit.next }}</div>
          </div>
        </div>
        <div class="digital-unit">{{ unit }}</div>
      </div>
      <div class="digital-info">
        <div class="info-row" v-for="item in infoData" :key="item.label">
          <span class="info-label">{{ item.label }}</span>
          <span class="info-value">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DigitalChart',
  props: {
    title: {
      type: String,
      default: '数字翻牌器'
    },
    value: {
      type: Number,
      default: 1234567
    },
    unit: {
      type: String,
      default: ''
    },
    infoData: {
      type: Array,
      default: () => [
        { label: '今日新增', value: '+1,234' },
        { label: '昨日对比', value: '+12.5%' },
        { label: '本周累计', value: '8,765' }
      ]
    }
  },
  data() {
    return {
      displayNumber: [],
      currentValue: 0
    }
  },
  mounted() {
    this.initDisplay()
    this.startAnimation()
    this.startRealTimeUpdate()
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
  },
  methods: {
    initDisplay() {
      const valueStr = this.value.toString()
      this.displayNumber = valueStr.split('').map(digit => ({
        current: digit,
        next: digit,
        isFlipping: false
      }))
    },
    startAnimation() {
      this.animateToValue(this.value)
    },
    animateToValue(targetValue) {
      const targetStr = targetValue.toString()
      const currentStr = this.currentValue.toString()
      
      // 补齐位数
      const maxLength = Math.max(targetStr.length, currentStr.length)
      const paddedTarget = targetStr.padStart(maxLength, '0')
      const paddedCurrent = currentStr.padStart(maxLength, '0')
      
      // 更新显示数字
      this.displayNumber = paddedTarget.split('').map((digit, index) => ({
        current: paddedCurrent[index] || '0',
        next: digit,
        isFlipping: paddedCurrent[index] !== digit
      }))
      
      // 触发翻转动画
      setTimeout(() => {
        this.displayNumber.forEach((digit, index) => {
          if (digit.isFlipping) {
            setTimeout(() => {
              digit.current = digit.next
              digit.isFlipping = false
            }, index * 100)
          }
        })
      }, 100)
      
      this.currentValue = targetValue
    },
    updateValue(newValue) {
      this.animateToValue(newValue)
    },
    startRealTimeUpdate() {
      // 模拟实时数据更新
      this.updateTimer = setInterval(() => {
        const randomChange = Math.floor(Math.random() * 1000) - 500
        const newValue = Math.max(0, this.currentValue + randomChange)
        this.animateToValue(newValue)
      }, 3000)
    }
  }
}
</script>

<style scoped>
.digital-chart {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.chart-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.digital-container {
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.digital-display {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.digital-number {
  width: 40px;
  height: 60px;
  perspective: 1000px;
}

.digit-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.digit-flip.flip {
  transform: rotateX(-90deg);
}

.digit-front,
.digit-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #00d4ff, #00ff88);
  color: #000;
  font-size: 24px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.digit-back {
  transform: rotateX(90deg);
}

.digital-unit {
  color: #00d4ff;
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}

.digital-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.info-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.info-value {
  color: #00ff88;
  font-size: 12px;
  font-weight: bold;
}
</style>